<template>
    <div class="contentPage">
        <div class="top">
            <div class="topFont">
                <span class="topIocn el-icon-tickets"></span>
                <span>销售日报</span>
            </div>
            <div class="topTeach">
                <ul class="clearfix cd-serchUl">
                    <li>
                        <li>
                            <el-date-picker  :editable="false" :readonly="false" :clearable='false' format="yyyy-MM-dd" value-format='yyyy-MM-dd' v-model="timeArr" type="daterange" @change='changeVal' range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
                            </el-date-picker>
                        </li>
                    </li>
                    <li>
                        <el-button type="primary" icon="el-icon-search" @click='changeVal'>查询</el-button>
                    </li>
                    <li>
                        <a style="color:white;cursor: pointer;">
                            <el-button type="success" icon="el-icon-download">导出</el-button>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main" v-cloak>
            <el-table ref="nana" @sort-change="sortChange" id="mybox" height="100%" :data="pageData" style="width:100%;height:100%" :default-sort="{prop: 'date', order: 'descending'}">
                <el-table-column type="index" width="50" fixed="left">
                </el-table-column>
                <el-table-column prop="reportDate" label="统计时间" min-width='120px'>
                </el-table-column>
                <el-table-column prop="finishedMoney" label="销售总额" min-width='120px'>

                </el-table-column>
                <el-table-column prop="finishedItemNum"  label="销售商品数量" min-width='140px'>
                </el-table-column>
                <el-table-column prop="finishedOrderNum"  label="销售商品单次" min-width='160px'>
                    <template slot-scope="scope">
                                <span>{{scope.row.finishedOrderNum?scope.row.finishedOrderNum:"/"}}</span>
                            </template>
                </el-table-column>
                <el-table-column prop="refundMoney"  label="退款金额" sortable='custom' min-width='140px'>
                </el-table-column>
                <el-table-column prop="refundOrderNum"  label="退款次数" sortable='custom' min-width='140px'>
                    <template slot-scope="scope">
                                <span>{{scope.row.refundOrderNum?scope.row.refundOrderNum:"/"}}</span>
                            </template>
                </el-table-column>
                <el-table-column prop="finishedCost" label="成本单价(元)" min-width='100px'>
                </el-table-column>
                <el-table-column prop="profit" label="利润(元)" min-width='80px'>
                </el-table-column>
                <el-table-column label="详情" min-width="80" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" plain @click='getPageList(scope.row)' icon="el-icon-document" size="mini">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div> 
         <!-- 分页 -->
         <div class="foot" v-cloak>
            <div class="panel footer_list" v-cloak>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="currentPage" :page-sizes="[50,100,150]" :page-size="50" layout="total, sizes, prev, pager, next, jumper" :total="totalResult">
                </el-pagination>
            </div>
        </div>
        <!-- 表格模态框 -->
        <el-dialog title="详情" style="width: 100%;z-index:999999;display:block;" :visible.sync="detail" v-if="detail">
            <ul class="clearfix pageList cd-serchUl" style="margin-bottom:20px">
                <li>
                    <el-input v-model="search.vmCode" clearable @keyup.enter.native="pageList"  placeholder="请输入售货机编号"></el-input>
                </li>
                <li style="margin: 0 5px">
                    <el-cascader :options="companyData" placeholder="请选择所属机构" @change='pageList' clearable change-on-select v-model="search.companyId">
                    </el-cascader>
                </li>

                <li style="margin: 0 5px">
                    <el-button type="primary" icon="el-icon-search" @click='pageList'>查询</el-button>
                </li>

                <li>
                    <!-- :href=`/ws-microservice-backstage/statisPayPerItem/findMachineDetailExcel?companyId=${getCompanyId}&vmCode=${search.vmCode}&beginTime=${orderBeginTime}&endTime=${orderEndTime}&descOrAsc=${column.order}&rankName=${column.prop}` -->
                    <a style="color:white;cursor: pointer;" >
                        <el-button type="success" icon="el-icon-download">导出</el-button>
                    </a>
                </li>

            </ul>
            <el-table :data="getPageListData" show-summary height="500" border style="width: 100%">
                <el-table-column prop="vmCode" label="售货机编号">
                </el-table-column>
                <el-table-column prop="companyName" label="所属机构">
                </el-table-column>
                <el-table-column prop="finishedMoney" label="销售总价">
                </el-table-column>
                <el-table-column prop="finishedItemNum" label="销售商品单次">
                </el-table-column>
                <el-table-column prop="finishedOrderNum" label="销售商品数量">
                    <template slot-scope="scope">
                                    <span>{{scope.row.finishedOrderNum?scope.row.finishedOrderNum:"/"}}</span>
                                </template>
                </el-table-column>
                <el-table-column prop="refundMoney" label="退款金额">
                </el-table-column>
                <el-table-column prop="refundOrderNum" label="退款次数">
                </el-table-column>
                <el-table-column prop="finishedCost" label="成本单价(元)">
                </el-table-column>
                <el-table-column prop="profit" label="利润(元)">
                </el-table-column>
            </el-table>
        </el-dialog>

    </div>
</template>

<script>
import axios from "axios";
export default {
  name: "dashboard",
  data() {
    return {
      detail: false,
      options: [
        {
          label: "热销",
          value: "1"
        },
        {
          label: "非热销",
          value: "0"
        }
      ],
      column: {
        prop: "reportDate",
        order: "descending"
      },
      rankName: "",
      descOrAsc: "",
      timeArr: [new Date(), new Date()],
      shopsPageData: [],
      companyData: [],
      search: {
        companyId: "",
        vmCode: ""
      },
      getCompanyId: "",
      gridData: "",
      restaurants: [],
      shopName: "",

      getPageListData: [],

      //分页初始化
      pageSize: 50,
      currentPage: 1,
      totalResult: "",
      pageNum: 1,
      pageData: [],
      modeTime: {},
      // 时间
      orderBeginTime: "",
      orderEndTime: "",
      pickerOptions2: {
        disabledDate: function(time) {
          return time.getTime() > new Date(GetDateStr(-1));
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick: function(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick: function(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  created() {
    var that = this;
    // that.sortChange(that.column)
    // that.page()
    that.getCompany(); //所属公司
  },
  filters: {
    capitalize: function(inputTime) {
      if (inputTime == "" || inputTime === undefined || inputTime == null) {
        return "";
      }
      var date = new Date(inputTime);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      var second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    }
  },
  methods: {
    resetTime(inputTime) {
      if (inputTime == "" || inputTime === undefined || inputTime == null) {
        return "";
      }
      var date = new Date(inputTime);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      var second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    sortChange(column, prop, order) {
      this.column = column;
      this.page();
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.page();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.page();
    },
    page() {
      var that = this;
      var loading = this.$loading({
        lock: true,
        text: "loading...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      if (that.timeArr != null) {
        that.orderBeginTime = that.resetTime(that.timeArr[0]);
        that.orderEndTime = that.resetTime(that.timeArr[1]);
      } else {
        that.orderBeginTime = "";
        that.orderEndTime = "";
      }
      var retSearchStartDate = that.resetTime(that.orderBeginTime);
      var retSearchEndDate = that.resetTime(that.orderEndTime);
      var rangeDay = getRangeDay(retSearchStartDate, retSearchEndDate);
      if (rangeDay > 30) {
        loading.close();
        that.$message({
          message: "查询时间间隔建议不能超过30天",
          type: "warning"
        });
        return;
      }

      axios
        .post(
          "/ws-microservice-backstage/statisPayPerItem/findstatisticsListPage",
          {
            page: that.pageNum,
            pageSize: that.pageSize,
            beginTime: that.orderBeginTime,
            endTime: that.orderEndTime,
            rankName: that.column.prop,
            descOrAsc: that.column.order
          }
        )
        .then(function(response) {
          console.log("response", response);
          loading.close();
          if (response.data.code == 0) {
            that.pageData = response.data.data.res;
            that.currentPage = response.data.data.page.currentPage;
            //that.currentPage = that.pageNum
            that.totalResult = response.data.data.page.totalResult;
          } else {
            that.pageData = "";
            return;
          }
        })
        .catch(function(error) {
          loading.close();
        });
    },
    getCompany() {
      var that = this;
      axios
        .get("/ws-microservice-backstage/company/getCompanyTree", {
          params: {}
        })
        .then(function(response) {
          that.companyData = response.data.data.children;
        })
        .catch(function(error) {});
    },
    searchEnter(e) {
      if (e.keyCode == 13) {
        this.pageNum = 1;
        this.page();
      }
    },
    //热销
    changeVal() {
      this.pageNum = 1;
      this.page();
    },
    pageList() {
      var that = this;
      var loading = this.$loading({
        lock: true,
        text: "loading...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      var index = that.search.companyId.length;

      that.getCompanyId = that.search.companyId[index - 1];
      if (that.getCompanyId == undefined) {
        that.getCompanyId = "";
      }
      axios
        .post("/ws-microservice-backstage/statisPayPerItem/findMachineDetail", {
          companyId: that.getCompanyId,
          beginTime: that.modeTime.reportDate,
          endTime: that.modeTime.reportDate,
          vmCode: that.search.vmCode
        })
        .then(function(response) {
          if (response.data.code == 0) {
            loading.close();
            that.getPageListData = response.data.data.data;
          } else {
            that.$message({
              message: response.data.msg,
              type: "warning"
            });
          }
        })
        .catch(function(error) {});
    },
    getPageList(item) {
      this.detail = true;
      this.search.vmCode = "";
      this.search.companyId = "";
      this.modeTime.reportDate = item.reportDate;
      this.pageList();
    }
  }
};
</script>
<style scoped>
.menu-box {
  min-width: 1310px;
  box-sizing: border-box;
}
.row {
  display: flex;
  float: left;
  width: 16.6%;
  padding-bottom: 0;
  box-sizing: border-box;
  min-width: 160px;
}
#main {
  height: 50%;
  width: 100%;
}
#tableRow {
  height: 50%;
  box-sizing: border-box;
}

[v-cloak] {
  display: none;
}

.contentPage {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.el-table__header-wrapper thead tr td {
  background: #e7f3ff;
}
.top {
  position: absolute;
  top: 0;
  z-index: 999;
  min-width: 1200px;
}
.main {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 100px;
  padding-bottom: 50px;
  width: 100%;
  height: 100%;
}
.foot {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}
.topFont {
  font-size: 24px;
}
.topTeach ul > li {
  display: inline-block;
  padding-bottom: 10px;
}
.topTeach ul {
  padding-top: 10px;
}
.pageList li {
  display: inline-block;
}
</style>
